<template>
  <div class="add-test">
    <h2>添加作业测试</h2>
    <el-form :model="form" label-width="120px">
      <el-form-item label="测试名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="测试描述">
        <el-input type="textarea" v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="form.startTime"
          type="datetime"
          placeholder="选择开始时间"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="form.endTime"
          type="datetime"
          placeholder="选择结束时间"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <h2>已添加的测试</h2>
    <el-table :data="tests" style="width: 100%">
      <el-table-column prop="name" label="测试名称"></el-table-column>
      <el-table-column prop="description" label="测试描述"></el-table-column>
      <el-table-column prop="startTime" label="开始时间"></el-table-column>
      <el-table-column prop="endTime" label="结束时间"></el-table-column>
      <el-table-column prop="completedBy" label="完成名单"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'AddTest',
  data() {
    return {
      form: {
        name: '',
        description: '',
        startTime: '',
        endTime: ''
      },
      tests: [] ,// 用于存储已添加的测试数据
      
    };
  },
  methods: {
    onSubmit() {
      if (this.form.name.trim() && this.form.description.trim() && this.form.startTime && this.form.endTime) {
        this.tests.push({
          name: this.form.name,
          description: this.form.description,
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          completedBy: [] // 初始化为空的完成名单
        });
        this.form.name = '';
        this.form.description = '';
        this.form.startTime = '';
        this.form.endTime = '';
        this.$message.success('测试已保存');
      } else {
        this.$message.error('所有字段均不能为空');
      }
    },
    onCancel() {
      this.$router.push('/');
    }
  }
};
</script>

<style scoped>
.add-test {
  padding: 20px;
  background: linear-gradient(to right, #ffffff, #f0f0f0);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
  max-width: 800px;
  margin: 40px auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.add-test:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

h2 {
  color: #409EFF;
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  animation: slideIn 0.5s ease;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  margin-right: 10px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.el-button:hover {
  background-color: #66b1ff;
  transform: scale(1.05);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
